<!-- 艺人-我的预约一条数据 -->
<template>
	<view class="listItem" @click="enterOrderDetails" :style="{margin: margin}">

		<view class="left">
			<image class="image" :src="pageData.headImg" mode="aspectFill"></image>
		</view>

		<view class="right">
			<view class="right-top">
				<text class="name">{{pageData.name}}</text>

				<!-- 因为评分暂时没有，所以先注释，以后有了再恢复 -->
				<view class="grade">
					<image class="grade-image" src="/static/images/Frame.png" mode="aspectFill"></image>
					<text class="grade-text">评分 5.0</text>
				</view>

			</view>

			<view class="right-center">
				<text>预约时间：</text>
				<text>{{pageData.startTime + '~'}}</text>
				<text>{{pageData.endTime | endTimeShow}}</text>
			</view>

			<view class="right-bottomBox">
				<view class="box-item">
					<text class="box-item-title">称呼</text>
					<text class="box-item-text">{{pageData.salutation}}</text>
				</view>
				<view class="box-item">
					<text class="box-item-title">时长</text>
					<text class="box-item-text">{{pageData.duration + pageData.unit}}</text>
				</view>
				<view class="box-item">
					<text class="box-item-title">项目</text>
					<text class="box-item-text">{{pageData.categoryName}}</text>
				</view>
				<view class="box-item">
					<text class="box-item-title">金额</text>
					<text class="box-item-text money">￥{{pageData.payAmount}}</text>
				</view>
			</view>

			<view class="right-buttons" v-if="isButton">
				<view v-if="pageData.status === 1" :class="{
					box1:true,
					box2: false
				}" @click.stop="refund">
					退款
				</view>

				<view v-if="pageData.status === 1" :class="{
					box1:true,
					box2: true
				}" @click.stop="setService(1)">
					开始服务
				</view>

				<view v-if="pageData.status === 2" :class="{
					box1:true,
					box2: true
				}" @click.stop="setService(2)">
					结束服务
				</view>

				<view v-if="pageData.status === 7" :class="{
					box1:true,
					box2: true
				}" @click.stop="setService(3)">
					接单
				</view>

			</view>

		</view>

		<view class="position">{{pageData.status | statusInit}}</view>

	</view>
</template>

<script>
	// api引入
	import {
		postOrderUpdate, // 开始服务或者结束服务或者接单
		getRefund, // 退款
	} from '@/api/order.js'

	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},


			margin: {
				type: String,
				default: "0 0 24rpx 0"
			}
		},
		data() {
			return {
				pageData: {}, // 页面数据
			};
		},
		computed: {

			/**
			 * 是否显示按钮
			 */
			isButton() {
				let status = this.pageData.status
				return status === 1 || status === 2 || status === 7;
			}
		},

		watch: {
			data: {
				handler() {
					let obj = this.data
					if (Object.keys(this.data).length > 0) {
						this.pageData = {
							artistId: obj.artistId, // 艺人id

							orderNo: obj.orderNo, // 订单号

							headImg: obj.coverUrl, // 头像
							name: obj.stageName, // 艺人名称

							startTime: obj.subscribeStartTime, // 预约时间
							endTime: obj.subscribeEndTime, // 结束时间

							salutation: obj.salutation, // 称呼
							duration: obj.duration, // 时长
							categoryName: obj.categoryName, // 项目
							unit: obj.unit, // 单位
							payAmount: obj.payAmount, // 金额

							status: obj.status, // 状态
						}

						console.log(this.pageData, '一条的数据');
					}
				},
				deep: true,
				immediate: true
			}
		},

		filters: {
			/**
			 * 状态展现文字
			 */
			statusInit(val) {
				let str = ''
				switch (val) {
					case 0:
						str = '待付款';
						break;
					case 1:
						str = '待服务';
						break
					case 2:
						str = '进行中'
						break;
					case 3:
						str = '已完成'
						break;
					case 4:
						str = '已退款'
						break;
					case 5:
						str = '已取消'
						break;
					case 6:
						str = '已评价'
						break;
					case 7:
						str = '待接单'
						break;
				}
				return str;
			},


			/**
			 * 结束时间分割
			 */
			endTimeShow(val) {
				return val ? val.split(" ")[1] : val
			}
		},
		methods: {
			...mapMutations('home', ['setOrderItemData']),

			/**
			 * 立即退款
			 */
			refund() {
				let that = this
				uni.showModal({
					title: '请确认是否退款？',
					success: function(res) {
						if (res.confirm) {

							that.$public.showLoading(true, '正在处理中')

							getRefund(that.orderNo).then((res) => {

								that.$public.showText('操作成功')

							}).catch(err => {

								that.$public.showText('操作失败')

							}).finally(() => {
								uni.hideLoading();
							})
						}
					}
				});
			},

			/**
			 * 设置服务
			 */
			setService(type) {
				let that = this
				uni.showModal({
					title: `请确认是否${type === 1 ? '开始' : '结束'}服务？`,
					success: function(res) {
						if (res.confirm) {

							that.$public.showLoading(true, '正在处理中')

							postOrderUpdate({
								orderNo: that.pageData.orderNo, // 订单号
								operation: type, //1开始服务;2结束服务;3接单
							}).then((res) => {

								that.$public.showText('操作成功')

								this.init()

							}).catch(err => {

								that.$public.showText('操作失败')

							}).finally(() => {

								uni.hideLoading();
							})
						}
					}
				});


			},





			/**
			 * 进入订单详情
			 */
			enterOrderDetails(val) {
				this.setOrderItemData(this.data)
				uni.navigateTo({
					url: '/pages/artist/artistCentre/orderManage/OrderDetails/index'
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.listItem {
		#flex(-, space-between, flex-start);
		#padding(16rpx 24rpx);
		#box(100%, auto, 16rpx, #fff);
		box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
		position: relative;

		.left {
			margin-right: 24rpx;

			.image {
				#box(120rpx, 120rpx, 50%, rgba(#000, .1));
			}
		}

		.right {
			flex: 1;
			#padding(20rpx 0 0 0);

			.right-top {
				#flex(-, start, center);

				.name {
					#font(36rpx, #0f0d21, 600);

				}

				.grade {
					#flex(-, start, center);

					.grade-image {
						#box(32rpx);
						margin: 0 8rpx 0 24rpx;
					}

					.grade-text {
						#font(22rpx, #0f0D21, black);
					}
				}
			}

			.right-center {
				#font(24rpx, #8c8a8a);
				margin: 16rpx 0;
			}

			.right-bottomBox {
				#flex(-, start, center);
				#box(100%, auto, 10rpx, rgba(#8C8A8A, .2));
				#padding(12rpx 0);

				.box-item {
					#box(100%/4, auto);
					#flex(column, center, center);

					&:not(:last-child) {
						border-right: 2rpx solid rgba(#000, .1);
					}

					.box-item-title {
						#font(20rpx, #8c8a8a);
						margin-bottom: 16rpx;
					}

					.box-item-text {
						#font(24rpx, #0f0d21);
						line-height: 36rpx;
						text-align: center;
					}
					
					.money{
						color:#CF0000;
					}

				}
			}


			.right-buttons {
				#flex(-, flex-end, center);
				margin-top: 12rpx;

				.box1 {
					#padding(14rpx 24rpx);
					#font(24rpx, #0f0d21);

					border: 2rpx solid rgba(0, 0, 0, 0.1);
					border-radius: 100rpx;
					margin-left: 16rpx;
				}

				.box2 {
					background: linear-gradient(180deg, #E27C8A -3%, #EC606F 100%);
					color: #fff;
					border: none;
				}
			}
		}

		.position {
			position: absolute;
			right: 24rpx;
			top: 24rpx;

			#font(28rpx, #ec606f);
		}

	}
</style>